<template>
	<view class="content">
		<!-- 购买说明 -->
		<view class="header" v-if="goods"
			:style="'background: url('+ goods.imgurl_detail + ') repeat 0 0 / 100% auto;'">
			<view class="head">
				<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
				<view class="header_title">
					<view @click="back()">
						<image :src="z_imgPath + 'back.png'"></image>返回
					</view>
					<view class="hang1">{{goods.title}} </view>
				</view>
			</view>

			<view class="header_center ">
				<image :src="z_imgPath + 'detail/ysc.png'" v-if="goods.collection_is==1" @click="sc_collect()">
				</image>
				<image :src="z_imgPath + 'detail/wsc.png'" v-else @click="sc_collect()"></image>
				<image :src="z_imgPath + 'detail/gmsm.png'" @click="$refs.shuoming.open()"></image>
				<image :src=" z_imgPath + 'detail/hegui.png'" @click="tosangdai()"></image>
			</view>
			<view class=" header_news"
				:style="'background: url('+ z_imgPath + 'detail/good_bg.png' + ') repeat 0 0 / 100% auto;'">
				<view class="header_news_t">
					<view class="header_news_t_price">
						<view>{{goods.price}}{{goods.type==5?'积分':'元'}}</view>
						<view>1张明信片</view>
					</view>
					<view class="riqi">
						<view v-if="goods.addtime">发售日</view>
						<view>{{goods.addtime}}</view>
					</view>
					<image :src="z_imgPath + 'detail/jiaoliu.png?11'" @click="toNewMp()"></image>
					<image :src="z_imgPath + 'detail/jilv.png'" @click="getjilv() "></image>
				</view>
				<view class="header_news_c">
					<view class="redu">
						<image :src="item" v-for="(item,index) in join_user" :key="index" v-if="index<5"
							:style="'transform:translateX('+-index*20+'rpx'+')'"> </image>
						{{join_count}}次参与
					</view>
					<view class="flex_center" v-if="lock_info.goods_lock_surplus_time !==0">
						<image :src="lock_info.goods_lock_user_headimg"
							style="width: 44rpx;height: 44rpx;border-radius: 50%;margin-right: 10rpx;">
						</image>
						<view class="hang1" style="max-width: 150rpx;">
							{{lock_info.goods_lock_user_nickname}}
						</view>
						,锁箱<xwCountDown2 :datatime="lock_info.goods_lock_surplus_time"
							v-if="lock_info.goods_lock_surplus_time !==0">
						</xwCountDown2>秒
					</view>
				</view>
				<view class="header_news_b">
					<image :src="z_imgPath + 'detail/before.png'" @click="before()"></image>
					<view class="flex_center">第
						<text>{{goods.num}}</text>/{{goods.stock}}箱，商品卡剩余<text>{{goods.goodslist_surplus_stock}}</text>/{{goods.goodslist_stock}}张
					</view>
					<image :src="z_imgPath + 'detail/after.png' " @click="after()"></image>
				</view>
			</view>
		</view>
		<!-- style="min-height: 400rpx;" -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<!-- 赏池预览 -->
			<view class="shop">
				<view v-for="(item,index) in goodslist" :key="index" class="shop_item" @click="yulan(item,index)">
					<view class="item_head">
						<image :src="item.imgurl"></image>
						<view>{{item.shang_title}}</view>
						<view>{{item.surplus_stock}}/{{item.stock}}</view>
						<view class="qiangguang" v-if="item.surplus_stock==0">
							<image :src="z_imgPath + 'detail/qiangguangle.png'"></image>
						</view>
					</view>
					<view class="shop_con">
						<view class="hang1" style="color: #FFFFFF;">{{item.title}}</view>
						<view class="hang1">{{item.pro}}</view>
						<view class="hang1" v-if="item.shang_id>5">参考价:{{item.price}}{{goods.type==5?'积分':'元'}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 抽奖按钮 -->
		<view class="bar_box" v-if="goods.type != 3"
			:style="'background: url('+ z_imgPath + 'detail/detail_bottom.png'+ ') repeat 0 0 / 100% 100%;'">
			<view @click="choujiang(1)" class="bar_box_1"
				:style="'background: url('+ z_imgPath + 'detail/fa_1.png'+ ') no-repeat 0 0 / 100% 100%;'">
			</view>
			<view @click="choujiang(3)" class="bar_box_2"
				:style="'background: url('+ z_imgPath + 'detail/fa_3.png?1'+ ') no-repeat 0 0 / 100% 100%;'">
				+{{goods.three_time}}秒
			</view>
			<view @click="choujiang(5)" class="bar_box_3"
				:style="'background: url('+ z_imgPath + 'detail/fa_5.png?1'+ ') no-repeat 0 0 / 100% 100%;'">
				+{{goods.five_time}}秒
			</view>
			<view class="bar_box_4"
				:style="'background: url('+ z_imgPath + 'detail/suoxiang' + (lock_info.lock_is==1&& lock_info.goods_lock_surplus_time !==0?'_sel':'')  +'.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<xwCountDown2 v-if="lock_info.lock_is==1 && lock_info.goods_lock_surplus_time !==0"
					:datatime="lock_info.goods_lock_surplus_time" @change="change_time">
				</xwCountDown2>
			</view>
			<view @click="tohuanxiang()" class="bar_box_5"
				:style="'background: url('+ z_imgPath + 'detail/huanxiang.png'+ ') no-repeat 0 0 / 100% 100%;'">
			</view>
			<view @click="choujiang(goods.goodslist_surplus_stock)" class="bar_box_6"
				:style="'background: url('+ z_imgPath + 'detail/baoxiang.png'+ ') no-repeat 0 0 / 100% 100%;'">
			</view>
		</view>
		<!-- 抽奖按钮 -->
		<view class="bar_box" v-if="goods.type == 3">
			<view @click="tohuanxiang()" class="bar_box_5"
				:style="'background: url('+ z_imgPath + 'detail/huanxiang.png'+ ') no-repeat 0 0 / 100% 100%;'">
			</view>
			<view @click="choujiang(1)" class="btns"
				:style="'background: url('+ z_imgPath + 'detail/yfrh.png'+ ') no-repeat 0 0 / 100% 100%;'">
			</view>
		</view>
		<!-- 刷新浮框 -->
		<view class="xuanfu">
			<button open-type="share">
				<image :src="z_imgPath + 'detail/fenxiang.png'"></image>
			</button>
			<image :src="z_imgPath + 'detail/bangdan.png'" @click="gotoPage('/pages/shouye/bangdan')"></image>
			<image :src="z_imgPath + 'detail/shuaxin.png'" @click="getlist(goods.num)"></image>

			<image :src="z_imgPath + 'detail/kefu.png'" @click="tokefu()"></image>

		</view>

		<!-- 购买说明 -->
		<uni-popup ref="shuoming" type="bottom">
			<view class="order">
				<view class="order_title">
					<image :src="z_imgPath + 'detail/gmsm_p.png'"></image>
					<view class="ca" @click="$refs.shuoming.close()">×</view>
				</view>
				<view class="pop_con">
					<scroll-view scroll-y="true" style="max-height: 900rpx;">
						<view v-html="news"></view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<!-- 确认订单 -->
		<uni-popup ref="dingdan" type="bottom">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'detail/order_p.png'"></image>
					<view class="ca" @click="$refs.dingdan.close()">×</view>
				</view>
				<view class="order_title_con1">
					<view class="order_pic" v-if="pay_news.goods">
						<view class="order_pic_img">
							<image :src="pay_news.goods.imgurl_detail"></image>
						</view>
						<view>
							<view style="font-size: 35rpx;">{{pay_news.goods.title}}</view>
							<view style="margin-top: 40rpx;">类型：明信片</view>
							<view style="margin-top: 10rpx;">
								<text>单价：<text style="color: ;">{{pay_news.goods.price}}元</text></text>
								<text>×{{pay_news.goods.prize_num}}</text>
							</view>
						</view>
					</view>
					<view class="order_num">
						<view style="font-size: 28rpx;" v-if="pay_news.goods">明信片×{{pay_news.goods.prize_num}}</view>
						<view>
							小计:{{goods.box_type==5?'':'￥'}}<text>{{pay_news.order_total}}{{goods.box_type==5?'积分':''}}</text>
						</view>
					</view>
				</view>
				<view class="order_title_con1" v-if="goods.box_type!=1">
					<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
					<!-- 积分赏 -->
					<view class="fangshi" v-if="goods.type == 5">
						<view class="flex_center">
							<image :src="z_imgPath + 'yue.png'"></image>
							<view>
								使用积分抵扣￥<text>{{pay_news.use_score}}</text>（剩余：<text>{{pay_news.score}}</text>）
							</view>
						</view>
						<image :src="z_imgPath + 'yuan_sel.png'"></image>
					</view>
					<!-- 一番赏 -->
					<template v-else>
						<view class="fangshi" @click="change_yuan_index(1)">
							<view class="flex_center">
								<image :src="z_imgPath+'bi.png'"></image>
								<view>
									使用赏币抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
								</view>
							</view>
							<image :src="z_imgPath + 'yuan'+ (bi?'_sel':'') +'.png'"></image>
						</view>
						<view class="fangshi" @click="change_yuan_index(2)">
							<view class="flex_center">
								<image :src="z_imgPath + 'yue.png'"></image>
								<view>
									使用余额抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
								</view>
							</view>
							<image :src="z_imgPath + 'yuan'+ (yue?'_sel':'') +'.png'"></image>
						</view>
					</template>

				</view>
				<view style="font-size: 24rpx;margin:20rpx 10rpx;">
					下单购买即表示同意
					<text style="color: #B07CDD;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
				</view>
				<view class="order_title_btn">
					<view>
						总计:{{goods.box_type==5?'':'￥'}}<text
							style="font-size: 40rpx;">{{pay_news.price}}{{goods.box_type==5?'积分':''}}</text>
					</view>
					<view class="zhifu" @click="pay()">确定支付</view>
				</view>
			</view>
		</uni-popup>

		<!-- 奖品弹窗 -->
		<uni-popup ref="jp_show" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="pop_jp">
				<image class="pop_gongxi" :src="z_imgPath + 'detail/jp_img.png'"></image>
				<view class="jp_headimg">
					<image :src="jp_news.headimg"></image>
				</view>
				<view class="jp_name">{{jp_news.nickname}}</view>
				<view class="jp_title animated zoomIn"
					:style="'background: url('+ z_imgPath + 'detail/jp_bg5.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="jp_title_1">
						<view class="jp_list" v-for="(v,i) in jp_arr" :key='i'>
							<view class="list_img">
								<image :src="v.goodslist_imgurl"></image>
								<view>{{v.shang_title}}</view>
							</view>
							<view class="hang1">{{v.goodslist_title}}</view>
						</view>
					</view>
				</view>
				<view class="jp_btn">
					<view class="animated fadeInLeft" @click="tosangdai()">去赏袋</view>
					<view class="animated fadeInRight" @click="$refs.jp_show.close()">继续抽</view>
				</view>
			</view>
		</uni-popup>

		<!-- 详情弹窗 -->
		<uni-popup ref="yulanPop" type="center" mask-background-color="rgba(0,0,0,.95)">
			<swiper :indicator-dots="true" :autoplay="false" :duration="500" :current="current_index"
				style="width: 540rpx;height: 800rpx;">
				<swiper-item v-for="(v,i) in goodslist" :key="i">
					<view class="yulanStyle">
						<view>{{v.shang_title}}</view>
						<view>
							<image :src="v.imgurl" mode="widthFix"></image>
						</view>
						<view class="hang1">{{v.title}}</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-popup>

		<!-- 中赏记录 -->
		<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'detail/jilv_p.png'"></image>
					<view class="ca" @click="$refs.jilv.close(),page_num=1,mixTotal=0">×</view>
				</view>
				<view class="jilv_title">
					<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.shang_id)"
						:style="shang_id==item.shang_id?'background:#B07CDD':''">
						<text>{{item.shang_title}}</text>
					</view>
				</view>
				<!-- -->
				<scroll-view scroll-y="true" @scrolltolower="getjilv" style="height:900rpx;">
					<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_list">
						<view>
							<view class="flex_center ">
								<image :src="item.user_info.headimg"></image>
								<view class="hang1" style="max-width: 260rpx;">{{item.user_info.nickname}}
								</view>
							</view>
							<view style="font-size: 24rpx;">{{item.addtime}}</view>
						</view>
						<view>
							<view class="flex_center">
								<image :src="item.goodslist_imgurl" style="border-radius: 8rpx;"></image>
								<view class="hang1" style="max-width: 300rpx;">{{item.goodslist_title}}</view>
							</view>
							<view>X{{item.prize_num}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 换箱 -->
		<uni-popup ref="huanxiang" type="bottom">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'detail/huanxiang_p.png'" style="width: 173rpx;height: 87rpx;"></image>
					<view class="ca" @click="$refs.huanxiang.close()">×</view>
				</view>
				<view class="huanxiang_header">
					<view v-for="(v,i) in huanxiang_arr" :key="i" @click="huanxiang_click(saixuan_index,v.page_no)"
						:class="page_no==v.page_no?'header_view_sel':'header_view'">{{v.title}}</view>
				</view>
				<!-- 商品展示 -->
				<view class="goods_v">
					<view class="flex_center" @click="huanxiang_click(1,page_no)">
						<text :style="'color:'+(saixuan_index==1?'#B07CDD':'')">箱号</text>
						<image :src="z_imgPath+'saixuan' +(saixuan_index==1?'_sel':'')+ '.png'" class="goods_v_1">
						</image>
					</view>
					<view class="flex_center" @click="huanxiang_click(2,page_no)" style="margin-left: 40rpx;">
						<text :style="'color:'+(saixuan_index==2?'#B07CDD':'')">余量</text>
						<image :src="z_imgPath+'saixuan' +(saixuan_index==2?'_sel':'')+ '.png'" class="goods_v_1">
						</image>
					</view>
				</view>
				<!-- 赏品余量 -->
				<scroll-view scroll-y="true" class="yuliang">
					<view class="yuliang_list" v-for="(v,i) in huanxiang_Detail" :key='i' @click="getlist(v.num)">
						<view class="list_l"
							:style="'background: url('+ z_imgPath + 'kong_box.png'+ ') no-repeat 0 0 / 100% 100%;'">
							<view style="margin-top:65rpx;">第{{v.num}}箱</view>
							<view style="margin-top: 10rpx;">剩
								<text style="color: #96FFFE;">{{v.surplus_all_stock}}</text> 张
							</view>
						</view>
						<view class="list_r">
							<view v-for="(a,b) in v.goodslist" :key='b'>
								<text>{{a.shang_title}}</text>
								<text>{{a.surplus_stock}}/{{a.stock}}</text>
							</view>
						</view>
						<view class="qiangguang" v-if="v.surplus_stock==0">
							<image :src="z_imgPath + 'qiangguangle1.png'"></image>
						</view>
					</view>

				</scroll-view>

			</view>
		</uni-popup>

		<!-- 抽奖动画 -->
		<uni-popup ref="popup" type="center" :maskClick="false" mask-background-color="rgba(0,0,0,.8)">
			<view class="dhboxs" v-if="jp_arr.length && jp_arr.length>0"
				:style="'background: url('+ z_imgPath + 'detail/jp_bg'+ jp_arr.length +'.png'+ ') no-repeat 0 0 / 100% 100%;height:'+ ( jp_arr.length==1?'330':jp_arr.length==3?'660':'909') +'rpx;'">
				<view class="choubox" v-for="(b,v) in jp_arr.length" :key="v">
					<view class="choulist">
						<view class="choulists" :style="moveCss[v]">
							<view class="cj_title" v-for="(a,c) in items[v]" :key="c">
								<image :src="a.imgurl"></image>
								<view>{{a.shang_title}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="dhxian"></view>
			</view>
			<view class="tiaobox" @click="tiaofun()">
				跳过
			</view>
			<!-- <image class="tiaobox"  :src="z_imgPath + 'tiaoguo.png'"></image> -->
		</uni-popup>
		<view class="zzz" ref="refDivName"></view>
		<!-- <bangding></bangding> -->


	</view>
</template>

<script>
	import xwCountDown2 from '@/components/xw-CountDown2'
	// import bangding from '@/components/bangding'
	export default {
		components: {
			xwCountDown2,
			// bangding
		},
		data() {
			return {
				z_imgPath: this.$z_img + 'shouye/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				goods_id: '', //商品id
				goods_num: '', //箱数
				goods: {},
				goodslist: [],
				join_count: '',
				join_user: [], // 参与人数
				// 锁箱
				lock_info: {},
				// 中赏记录
				jl_Arr: [],
				page_num: 1, // 页码
				mixTotal: 0, // 统计信息总页数
				// 换箱头部
				huanxiang_arr: [],
				page_no: 0,
				saixuan_index: 1,
				huanxiang_Detail: [],

				bi: true, // 1:是否币支付,
				yue: true, // 2:余额支付
				prize_num: 1, // 抽奖次数即购买次数
				pay_news: {}, // 订单信息
				// 奖品
				jp_news: '', //用户头像
				jp_arr: [],
				news: '',

				// 支付失效
				pay_status: false,
				downOption: {
					auto: false
				},
				// 动画
				rollTimer: null, //动画定时器句柄
				moveCss: [], //奖励滚动组件的滑动的动画效果css
				luckyNums: 0, //中奖位置
				luckydata: [], //中奖位置数组
				lnStart: 50, //中奖位置区间开始
				lnEnd: 60, //中奖位置区间结束
				items: [], //滚动的卡片列表
				awardItem: [], //中奖道具
				left_px: '',
				tiaotype: 1,
				// 动画

				current_index: 0,
				// 中赏记录
				shang_cate: [],
				shang_id: 0,

				show: 1,

			}
		},

		onLoad(v) {
			this.goods_id = v.goods_id
			this.goods_num = v.goods_num ? v.goods_num : ''
			this.getDanye(3)
			this.getgoodslist_count()
			if (v.pid) {
				uni.setStorageSync('pid', v.pid)
			}
		},

		onShareAppMessage() {
			let that = this;
			return {
				title: "乐掏" + that.goods.title + '系列' + ' 第' + that.goods.num + '套',
				imageUrl: that.goods.imgurl,
				path: "/pages/shouye/detail?goods_id=" + that.goods_id + '&goods_num=' + that.goods.num + '&pid=' + uni
					.getStorageSync('userinfo').ID
			};
		},

		methods: {
			change_time(e) {
				console.log(e)
				if (e.s == 0) {
					this.lock_info.lock_is = 0
					this.lock_info.goods_lock_surplus_time = 0
				}
			},
			tokefu() {
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
			getlist(a) {
				this.goods_num = a
				this.loadData(1)
				this.$refs.huanxiang.close()
			},
			after() {
				if (this.goods.num < this.goods.stock) {
					this.goods_num = this.goods.num + 1
					this.getlist(this.goods_num)
				} else {
					uni.showToast({
						title: '没有更多箱啦~',
						icon: 'error'
					})
				}
			},
			before() {
				if (this.goods.num > 1) {
					this.goods_num = this.goods.num - 1
					this.getlist(this.goods_num)
				} else {
					uni.showToast({
						title: '当前已是第一箱~',
						icon: 'error'
					})
				}
			},
			huanxiang_click(a, b) {
				let that = this;
				this.saixuan_index = a
				this.page_no = b
				that.req({
					url: 'goodslist_content',
					data: {
						sort: that.saixuan_index,
						goods_id: that.goods_id,
						page_no: that.page_no,
					},
					success(res) {
						if (res.status == 1) {
							that.huanxiang_Detail = res.data
						}
					}
				})
			},
			tohuanxiang() {
				this.huanxiang_click(this.saixuan_index, this.page_no)
				this.$refs.huanxiang.open()
			},
			// 换箱头部
			getgoodslist_count() {
				let that = this;
				that.req({
					url: 'goodslist_count',
					data: {
						goods_id: that.goods_id
					},
					success(res) {
						if (res.status == 1) {
							that.huanxiang_arr = res.data
						}
					}
				})
			},
			getDanye(e) {
				let that = this;
				that.req({
					url: 'danye',
					data: {
						type: e
					},
					success(res) {
						if (res.status == 1) {
							that.news = res.data
						}
					}
				})
			},
			// 中赏记录
			change_shang_id(e) {
				this.shang_id = e
				this.page_num = 1
				this.jl_Arr = []
				this.getjilv()
			},
			getjilv() {
				let that = this;
				console.log(that.page_num, this.mixTotal)
				if (this.page_num !== 1 && this.page_num > this.mixTotal) {
					return
				}
				that.req({
					url: 'shang_log',
					Loading: true,
					data: {
						page: that.page_num,
						goods_id: that.goods_id,
						goods_num: that.goods.num,
						shang_id: that.shang_id
					},
					success(res) {
						if (res.status == 1) {
							that.shang_cate = res.data.category;
							that.mixTotal = res.data.last_page
							if (that.page_num === 1) {
								that.jl_Arr = res.data.data;
							} else {
								that.jl_Arr = that.jl_Arr.concat(res.data.data)
							}
							that.page_num += 1
							that.$refs.jilv.open()

						}
					}
				})
			},
			back() {
				var pages = getCurrentPages();
				// console.log(pages)

				if (pages.length == 1 && pages[0].route == "pages/shouye/detail") {
					uni.switchTab({
						url: '/pages/shouye/index'
					})
				} else {
					uni.navigateBack()
				}

			},




			openBox(v) {
				// #ifdef H5
				this.left_px = this.$refs.refDivName.$el.offsetWidth
				// #endif
				// #ifndef H5
				uni.createSelectorQuery().in(this).select(".zzz").boundingClientRect(data => {
					this.left_px = data.width; //表示元素宽度
				}).exec();
				// #endif
				//初始化数据
				this.tiaotype = 1;
				this.InitPageModel(v);
				//500ms 之后开始奖励列表滑动
				setTimeout(() => {
					this.rollTimer = setTimeout(() => this.startScroll(v), 100);
				}, 150);
			},
			//随机数
			getRand(start, end) {

				return Math.floor(Math.random() * (end - start + 1) + start);
			},
			getItem() {
				let r = this.getRand(0, (this.goodslist.length - 1));
				let item;
				item = this.goodslist[r];
				return item;
			},
			//初始化列表
			InitPageModel(v) {
				var that = this;
				//随机一个总数
				that.items = [];
				//中间号码的列队
				that.luckydata = [];
				//中奖卡片的位置
				for (var a = 0; a < v; a++) {
					var jldata = [];
					that.luckyNums = that.getRand(that.lnStart, that.lnEnd);
					that.luckydata.push(that.luckyNums)

					let loopNum = that.lnEnd - that.luckyNums < 4 ? that.luckyNums + 4 : that.lnEnd;
					for (let i = 0; i < loopNum; i++) {
						let item = {};
						if (i == that.luckyNums) {
							item = that.goodslist.filter((item) => item.id == that.jp_arr[a].goodslist_id)[0]; //把奖励加到列表里
							that.awardItem.push(item); //拿到奖励的各个参数
						} else item = that.getItem();
						jldata.push(item);
					}
					that.items[a] = jldata;
				}
				that.$nextTick(function() {
					that.$refs.popup.open()
				})
			},

			//滑动效果
			startScroll() {
				let that = this;
				console.log(that.luckydata);
				console.log('-------------------------------');
				that.$nextTick(function() {
					setTimeout(() => {
						for (let a = 0; a < that.luckydata.length; a++) {
							let yanzi = 'top:-' + ((that.luckydata[a] - 1.95) * that.left_px) +
								'px;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
							that.moveCss.push(yanzi)
							//6s 动画结束后 开始弹出奖励图片，6500ms后执行
						}
					}, 500);
					/* that.rollTimer = setTimeout(() => {
						that.tiaofun()
					}, 9000); */
				})
			},
			tiaofun() {
				let that = this;
				that.moveCss = [];
				// 清除CSS动画属性
				for (var a = 0; a < that.luckydata.length; a++) {
					let left = 'top:0;'
					that.moveCss.push(left)
				}
				clearTimeout(that.rollTimer);
				that.$refs.popup.close()
				setTimeout(() => {
					that.$refs.jp_show.open()
					that.moveCss = [];
					that.items = [];
					that.luckydata = [];
				}, 500);
			},




			yulan(e, a) {
				this.current_index = a
				this.$refs.yulanPop.open();
			},
			toNewMp() {
				uni.navigateToMiniProgram({
					appId: uni.getStorageSync('jump_appid'), // 此为生活缴费appid
					path: 'pages/my/index?token=' + uni.getStorageSync('token'), // 此为生活缴费首页路径
					envVersion: "release",
					extraData: {
						'token': uni.getStorageSync('token')
					},
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			tosangdai() {
				uni.setStorageSync('page', this.$mp.page.route)
				uni.navigateTo({
					url: '../sangdai/sangdai'
				})
			},
			change_yuan_index(e) {
				if (e == 1) {
					this.bi = !this.bi
				}
				if (e == 2) {
					this.yue = !this.yue
				}
				this.choujiang(this.prize_num)
			},
			sc_collect() {
				let that = this;
				that.req({
					url: 'addCollect',
					data: {
						goods_id: that.goods.id,
						goods_num: that.goods.num
					},
					success(res) {
						if (res.status == 1) {
							if (that.goods.collection_is == 1) {
								that.goods.collection_is = 0
							} else {
								that.goods.collection_is = 1
							}
						}
					}
				})
			},

			pay() {
				let that = this;
				let info = {
					prize_num: that.prize_num,
					goods_id: that.goods_id,
					goods_num: that.goods.num,
					use_money_is: that.yue ? 1 : 2,
					use_integral_is: that.bi ? 1 : 2
				}
				if (that.pay_status) {
					return
				}
				if (info) {
					that.pay_status = true
					that.req({
						url: 'orderbuy',
						data: info,
						success(res) {
							if (res.status == 1) {
								that.jp_arr = []
								if (res.data.status == 1) {
									that.info = {}
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.res.timeStamp,
										nonceStr: res.data.res.nonceStr,
										package: res.data.res.package,
										signType: 'MD5',
										paySign: res.data.res.paySign,
										complete(ress) {
											if (ress.errMsg == 'requestPayment:fail cancel') {
												uni.showToast({
													title: '取消支付',
													icon: 'loading',
													duration: 1000
												})
											}
											if (ress.errMsg == 'requestPayment:ok') {
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													duration: 1000
												})
												setTimeout(() => {
													that.$refs.dingdan.close()
													that.req({
														url: 'prizeorderlog',
														data: {
															order_num: res.data.order_num
														},
														success(aa) {
															if (aa.status == 1) {
																that.jp_news = aa.data
																	.user_info
																that.jp_arr = aa.data.data

																if (that.jp_arr.length ==
																	1 || that.jp_arr
																	.length == 3 || that
																	.jp_arr.length == 5) {
																	that.openBox(that
																		.jp_arr
																		.length)
																} else {
																	that.$refs.jp_show
																		.open()
																}
																that.loadData(1)
															}
														}
													})
												}, 1500)
											}
										}
									})
								} else {
									that.info = {}
									uni.showToast({
										title: '支付成功',
										icon: 'success',
										duration: 1000
									})
									that.$refs.dingdan.close()
									that.req({
										url: 'prizeorderlog',
										data: {
											order_num: res.data.order_num
										},
										success(aa) {
											if (aa.status == 1) {
												that.jp_news = aa.data.user_info
												that.jp_arr = aa.data.data
												if (that.jp_arr.length == 1 || that.jp_arr.length == 3 ||
													that.jp_arr.length == 5) {
													that.openBox(that.jp_arr.length)
												} else {
													that.$refs.jp_show.open()
												}
												that.loadData(1)
											}

										}
									})
								}
							}
							if (res.status == 0) {

							}
						},
						complete() {
							that.pay_status = false
						}

					})

				}
			},
			choujiang(e) {
				this.prize_num = e
				this.order_money()
			},
			order_money() {
				let that = this;
				console.log(234)
				for (var a = 0; a < that.luckydata.length; a++) {
					let yanzi = 'top:0;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
					// that.$set(that.moveCss, a, yanzi)
					that.moveCss.push(yanzi)
					console.log('moveCss:', that.moveCss[a])
				}
				that.req({
					url: 'ordermoney',
					data: {
						prize_num: that.prize_num,
						goods_id: that.goods_id,
						goods_num: that.goods.num,
						use_money_is: that.yue ? 1 : 2,
						use_integral_is: that.bi ? 1 : 2
					},
					success(res) {
						if (res.status == 1) {
							that.pay_news = res.data
							that.$refs.dingdan.open()
						}
					}
				})
			},



			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(false)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.loadData(page.num);
			},
			loadData(pageNo) {
				// 模拟接口
				let that = this;
				that.req({
					url: 'goodsdetail',
					data: {
						goods_id: that.goods_id,
						goods_num: that.goods_num,
					},
					success(res) {
						if (res.status == 1) {
							if (res.status == 0) {
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
							if (res.status == 1) {
								that.goods = res.data.goods
								// that.goods_num = res.data.goods.num
								that.join_count = res.data.join_count
								that.join_user = res.data.join_user
								that.$nextTick(() => {
									that.lock_info = res.data.lock_info
								})
								that.mescroll.endByPage(res.data.goodslist.length, 1);
								if (pageNo == 1) {
									that.goodslist = res.data.goodslist;
								} else {
									that.goodslist = that.goodslist.concat(res.data.goodslist);
								}
							}
						}
					}
				})
			},



		}
	}
</script>

<style lang="scss">
	.zzz {
		width: 140rpx;
		height: 1rpx;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.dhboxs {
		position: relative;
		width: 750rpx;
		/* height: 909rpx; */
		padding: 80rpx 25rpx;
		box-sizing: border-box;
	}

	.dhxian {
		width: 3rpx;
		height: calc(100% - 100rpx);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 52rpx;
		margin: auto;
		background: #B07CDD;
		box-shadow: 0 2rpx 10rpx 4rpx #B07CDD;
	}

	.tiaobox {
		width: 160rpx;
		height: 60rpx;
		border: 2rpx solid #FF7315;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF7315;
		border-radius: 10rpx;
		margin: 100rpx auto 0;
		position: relative;
		z-index: 20;
	}

	.choubox {
		width: 270rpx;
		height: 300rpx;
		position: relative;
		margin: 30rpx auto;
		overflow: hidden;

		.choulist {
			position: absolute;
			display: flex;
			width: 100%;
		}
	}



	.choulists {
		position: relative;
		top: 0;
		left: 0;
		// display: flex;
	}


	.cj_title {
		width: 240rpx;
		height: 220rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: left;
		position: relative;

		>view {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 20rpx 0 12rpx;
			box-sizing: border-box;
			background: #B07CDD;
			border-radius: 0 10rpx 0 0;
		}

		>image {
			width: 220rpx;
			height: 220rpx;
		}

	}

	/* 动画 */
	.list_r text:nth-of-type(2) {
		/* color: #F96026; */
	}

	.list_r>view {
		width: 30%;
		display: flex;
		justify-content: space-between;
		line-height: 44rpx;
	}

	.list_r>view:nth-child(3n-1) {
		margin: 0 5%;
	}

	.list_r {
		margin-left: 40rpx;
		width: 500rpx;
		display: flex;
		/* justify-content: space-around; */
		flex-wrap: wrap;
	}

	.list_l {
		width: 97rpx;
		height: 100rpx;
		text-align: center;
	}

	.yuliang_list {
		display: flex;
		align-items: center;
		width: 690rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		border: 1px solid #fff;
		padding: 37rpx 20rpx 60rpx;
		box-sizing: border-box;
		position: relative;
		color: #FFFFFF;
	}

	.yuliang {
		width: 690rpx;
		max-height: 900rpx;
		border-radius: 20rpx;
		margin: 15rpx auto;
		box-sizing: border-box;
	}

	.goods_v_1 {
		width: 40rpx;
		height: 40rpx;
		/* margin-left: 10rpx; */
	}

	.goods_v {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
		margin: 10rpx;
	}

	.header_view_sel {
		background: rgba(255, 115, 21, 0.2);
		border: 1px solid #B07CDD;
		color: #B07CDD;
		border-radius: 10rpx;
	}

	.header_view {
		background: rgba(242, 19, 55, 0.08);
		border: 1px solid #999999;
		color: #999999;
	}

	.huanxiang_header>view {
		width: 180rpx;
		height: 58rpx;
		border-radius: 29rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.huanxiang_header {
		display: flex;
		width: 100%;
		overflow-x: scroll;
	}

	/* 换箱 */
	.yulanStyle image:nth-of-type(1) {
		width: 550rpx;
		/* height: 550rpx; */
	}

	.yulanStyle>view:nth-of-type(2) {
		border: 10rpx solid #B07CDD;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
		overflow: hidden;
	}

	.yulanStyle>view:nth-of-type(1) {
		font-size: 52rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #080808;
		line-height: 52rpx;
		-webkit-text-stroke: 3rpx #FFFFFF;
		text-stroke: 3rpx #FFFFFF;
		background: #B07CDD;
		padding: 6rpx 20rpx;
		width: fit-content;
	}

	.yulanStyle {
		font-size: 47rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}

	.jp_btn>view:nth-of-type(2) {
		background: #B07CDD;
		border-radius: 10rpx;
	}

	.jp_btn>view:nth-of-type(1) {
		border: 2rpx solid #B07CDD;
		border-radius: 10rpx;
		color: #B07CDD;
	}

	.jp_btn>view {
		width: 160rpx;
		height: 60rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.jp_btn {
		/* margin-top: 30rpx; */
		display: flex;
		justify-content: space-around;
	}

	.list_img>view {
		font-size: 24rpx;
		position: absolute;
		background: #B07CDD;
		bottom: 0;
		left: 0;
		border-radius: 0 10rpx 0 0;
		text-align: left;
		padding: 0 20rpx 0 12rpx;
		box-sizing: border-box;
	}

	.list_img>image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
	}

	.list_img {
		width: 172rpx;
		height: 172rpx;
		border-radius: 10rpx;
		position: relative;
		border: 1px solid;
		box-shadow: 0px 0px 10rpx 0px #B07CDD;
	}

	.jp_list {
		font-size: 24rpx;
		width: 170rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.pop_gongxi {
		width: 568rpx;
		height: 457rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -212rpx;
	}

	.jp_title_1>view:nth-child(3n-1) {
		margin: 20rpx 30rpx 0 30rpx;
	}

	.jp_title_1 {
		width: 622rpx;
		height: 680rpx;
		overflow-y: scroll;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: auto;
		color: #FFFFFF;
	}

	.jp_title {
		width: 750rpx;
		height: 909rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		padding-top: 180rpx;
		padding-bottom: 100rpx;
		/* margin-top: 200rpx; */
	}

	.jp_name {
		/* font-family: 'zcq'; */
		font-size: 28rpx;
		color: #FFFFFF;
		/* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
		position: absolute;
		top: 104rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 13;
	}

	.jp_headimg>image {
		width: 114rpx;
		height: 114rpx;
		border-radius: 50%;
	}

	.jp_headimg {
		width: 114rpx;
		height: 114rpx;
		border-radius: 50%;
		border: 1px solid #B07CDD;
		position: absolute;
		top: -26rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 12;
	}

	.pop_jp {
		width: 750rpx;
		height: 942rpx;
		margin: auto;
		text-align: center;
	}

	.fangshi text {
		color: #B07CDD;
	}

	.fangshi>view>image {
		margin-right: 20rpx;
	}

	.fangshi image {
		width: 40rpx;
		height: 40rpx;
	}

	.fangshi {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 60rpx;
		align-items: center;
	}

	.zhifu {
		width: 252rpx;
		height: 67rpx;
		background: #B07CDD;
		border-radius: 7rpx;
		font-size: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_title_btn {
		width: 690rpx;
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.order_num text {
		font-size: 32rpx;
		color: #B07CDD;
	}

	.order_num>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.order_num {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #333333;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.order_pic>view>view:nth-of-type(3) {
		display: flex;
		justify-content: space-between;
		width: 410rpx;
	}

	.order_pic>view:nth-of-type(2) {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-top: 14rpx;
		box-sizing: border-box;
	}

	.order_pic_img>image {
		width: 168rpx;
		height: 168rpx;
		border-radius: 10rpx;
	}

	.order_pic_img {
		width: 188rpx;
		height: 188rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_pic {
		display: flex;
	}

	.order_title_con1 {
		width: 690rpx;
		background: #090909;
		border: 2rpx solid #B07CDD;
		border-radius: 17rpx;
		margin-top: 28rpx;
		padding: 20rpx 30rpx 10rpx;
		box-sizing: border-box;
	}

	.order_title>image {
		width: 275rpx;
		height: 88rpx;
		position: absolute;
		left: 30rpx;
		top: -44rpx;
	}

	.order_title {
		font-size: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		position: relative;
		text-align: right;
	}

	.order {
		width: 750rpx;
		background: rgba(0, 0, 0, 0.9);
		border-radius: 30rpx 30rpx 0px 0px;
		border: 5rpx solid #FF7315;
		border-bottom: none;
		position: absolute;
		bottom: 0;
		/* padding: 10rpx 30rpx 50rpx; */
		box-sizing: border-box;
		color: #FFFFFF;
	}

	.pop_con {
		max-height: 900rpx;
		background: rgba(0, 0, 0, 0.5);
		margin: 10rpx auto;
		padding: 20rpx 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		box-sizing: border-box;
	}



	.jilv_list>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #F7F7F7;
	}

	.jilv_list image:nth-of-type(2) {
		width: 55rpx;
		height: 55rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}

	.jilv_list image:nth-of-type(1) {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.jilv_list {
		width: 657rpx;
		height: 164rpx;
		border: 2rpx solid #F7F7F7;
		margin: 22rpx auto;
		padding: 10rpx 20rpx 16rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.jilv_title>view {
		padding: 4rpx 20rpx;
		border: 3rpx solid;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24rpx;
		flex-shrink: 0;
		color: #F7F7F7;
	}

	.jilv_title {
		font-size: 30rpx;
		color: #F7F7F7;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
		width: 100%;
		margin: 20rpx auto;
		overflow-x: scroll;
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
	}

	.xuanfu image {
		width: 77rpx;
		height: 77rpx;
		margin-top: 20rpx;
	}

	.xuanfu {
		position: fixed;
		bottom: 391rpx;
		right: 20rpx;
		width: 77rpx;
		z-index: 21;
	}

	.shop_con {
		padding: 10rpx;
		box-sizing: border-box;
		line-height: 40rpx;
		/* background: #000000; */
		border-radius: 0 0 10rpx 10rpx;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.6);
	}

	.qiangguang>image {
		width: 44rpx;
		height: 90rpx;
	}

	.qiangguang {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 7rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.item_head>view:nth-of-type(2) {
		background: rgba(21, 23, 23, 0.4);
		top: 10rpx;
		left: 10rpx;
		position: absolute;
		padding: 0 14rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-style: italic;
		color: #FFFFFF;
		border-radius: 7rpx;
	}

	.item_head>view:nth-of-type(1) {
		position: absolute;
		background: #B07CDD;
		border-radius: 7rpx;
		font-size: 21rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		bottom: 10rpx;
		right: 10rpx;
		padding: 0 14rpx;
		box-sizing: border-box;
	}

	.item_head>image {
		width: 168rpx;
		height: 168rpx;
		border: 3rpx solid #FFFFFF;
		border-radius: 7rpx;
	}

	.item_head {
		width: 174rpx;
		height: 174rpx;
		position: relative;
	}

	.shop_item {
		width: 174rpx;
		margin-top: 10rpx;
		position: relative;
		box-sizing: border-box;
		color: #FFFFFF;
		margin-right: 9rpx;
	}


	.shop {
		width: 730rpx;
		margin: 0rpx auto;
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;
	}

	.header_news_b text {
		font-size: 36rpx;
		color: #B07CDD;
	}

	.header_news_b>image {
		width: 109rpx;
		height: 35rpx;
	}

	.header_news_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-style: italic;
	}

	.header_news_c {
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;
	}

	.redu {
		/* width: 250rpx; */
		height: 46rpx;
		display: flex;
		align-items: center;
	}

	.redu>image {
		width: 46rpx;
		height: 46rpx;
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	.header_news_t_price>view:nth-of-type(1) {
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.header_news_t_price {
		width: 200rpx;
		height: 100rpx;
		/* border: 1rpx solid red; */
		font-family: zihun143hao;
		font-weight: 800;
		color: #121414;
		margin-right: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.riqi {
		width: 120rpx;
		/* height: 80rpx; */
		/* border: 1rpx solid darkblue; */
		font-size: 20rpx;
		/* -webkit-text-stroke: 2rpx #1A1A1A; */
		/* text-stroke: 2rpx #1A1A1A; */
		font-family: zihun143hao;
		font-weight: 800;
		text-align: center;
	}

	.header_news_t image:nth-of-type(2) {
		width: 192rpx;
		height: 54rpx;
	}

	.header_news_t image:nth-of-type(1) {
		width: 168rpx;
		height: 54rpx;
	}

	.header_news_t {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 24rpx;
	}

	.header_news {
		width: 750rpx;
		height: 273rpx;
		position: absolute;
		bottom: 0;
	}

	.header_center>image:nth-of-type(3) {
		width: 153rpx;
		height: 74rpx;
		position: absolute;
		bottom: 300rpx;
		right: 0;
	}

	.header_center>image:nth-of-type(2) {
		width: 192rpx;
		height: 46rpx;
		position: absolute;
		bottom: 300rpx;
		left: 25rpx;
	}

	.header_center>image:nth-of-type(1) {
		width: 169rpx;
		height: 78rpx;
		position: absolute;
		bottom: 380rpx;
		right: 0;
	}

	.header_center {
		/* position: relative; */
		/* margin: 0rpx auto; */
	}

	.header_title>view:nth-of-type(2) {
		width: 520rpx;
		text-align: center;
		/* margin: auto; */
	}

	.header_title>view:nth-of-type(1) {
		display: flex;
		align-items: center;
	}

	.header_title image {
		width: 48rpx;
		height: 48rpx;
	}

	.header_title {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.head {
		position: fixed;
		top: 0;
		z-index: 20;
	}

	.header {
		width: 750rpx;
		height: 660rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 15;
	}


	.content {
		padding-bottom: 120rpx;
		/* background: #FAFAFA; */
		padding-top: 660rpx;
	}



	.bar_box {
		width: 750rpx;
		height: 311rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.bar_box_1 {
		width: 202rpx;
		height: 101rpx;
		position: absolute;
		top: 36rpx;
		left: 33rpx;
	}

	.bar_box_2 {
		width: 215rpx;
		height: 111rpx;
		position: absolute;
		top: 11rpx;
		left: 279rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		-webkit-text-stroke: 2rpx #1A1A1A;
		text-stroke: 2rpx #1A1A1A;
	}

	.bar_box_3 {
		width: 202rpx;
		height: 101rpx;
		position: absolute;
		top: 30rpx;
		right: 18rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		-webkit-text-stroke: 2rpx #1A1A1A;
		text-stroke: 2rpx #1A1A1A;
	}

	.bar_box_4 {
		width: 276rpx;
		height: 160rpx;
		position: absolute;
		bottom: 0;
		left: 247rpx;
		font-size: 50rpx;
		padding-top: 34rpx;
		padding-left: 10rpx;
		text-align: center;
		box-sizing: border-box;
		font-weight: bold;
	}

	.bar_box_5 {
		width: 287rpx;
		height: 150rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.bar_box_6 {
		width: 258rpx;
		height: 145rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.btns {
		width: 418rpx;
		height: 85rpx;
		position: absolute;
		bottom: 20rpx;
		right: 10rpx;
	}
</style>